<template>
  <!--tab栏-->
  <div>
    <div class="index-tab flex flex-align-center">
      <div class="menu-item" v-for=" (listitem,index) in tablist" :key=index :class="{'active':TabsIndex==index+1}">
        <p v-if='listitem.subMenu.length==0'  @click="onChangeTabs(index,listitem.name,listitem.id)">{{listitem.name}}</p>
        <select v-if='listitem.subMenu.length>0' :class="{'active':TabsIndex==index+1}" @click="onChangeFun">
           <option  style="color:#000" v-for='(e,i) in listitem.subMenu' :key='i' :value="e.name">{{e.name}}</option>
         </select>
      </div>
    </div>
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
       
  </div>
</template>

<script>
export default {
  name: "IndexTab",
  data() {
    return {
      TabsIndex: 0,
      tablist: [],
      imgurl: []
    };
  },
  created() {
    this.https(
      "Index/getClientHomeFirstMenu",
      { lottery_id: 1 }
    ).then(data => {
      this.tablist = data;
    });
  },
  computed: {
    CaiPiaoType(){
       return this.$store.state.CaiPiaoType
    }
  },
  watch:{
   CaiPiaoType(news,old){
     if( this.TabsIndex == 4){
            if(news == 'ssc'){ //时时彩
              this.$router.push('/shrinkagetool');
            }else if(news == 'l3d'){ //福彩3d
              this.$router.push('/shrinkagetoolthreebits');
            }else if(news == 'pk10' || news == 'l11x5'){ //北京pk10 广东11选五
              this.$router.push('/shrinkagetoolfivebits');
            }else if(news == 'l28' || news == 'k3'){ //
              this.$router.push('/shrinkagetool123');
            }
     }
   }
  },
  methods: {
    onChangeFun(ele){ //下拉菜单
        this.TabsIndex = 6;
        if(ele.target.value == '走势图表'){
          this.$router.push('/trendcont');
          this.$store.commit("getSecondTabsName", '走势图表');
          this.$store.commit("setTabsId", 6);
        }else if(ele.target.value == '遗漏分析'){
          this.$router.push({name:'omissioncont',params: { chartType:'ylfx'}});
          this.$store.commit("getSecondTabsName", '遗漏分析');
          this.$store.commit("setTabsId", 83);
        }else if(ele.target.value == '冷热分析'){
          this.$router.push({name:'omissioncont',params: { chartType:'lrfx'}});
          this.$store.commit("getSecondTabsName", '冷热分析');
          this.$store.commit("setTabsId", 82);
        }
    },
    onChangeTabs(index,name,id) {
          this.$store.commit("getSecondTabsName", name);
          this.$store.commit("setTabsId", id);
          if(index == 0){ //计划推荐
            this.TabsIndex = 1;
            this.$router.push('/IndexContent');
          }
          else if(index == 1){ //人工计划
            this.TabsIndex = 2;
            this.$router.push('ArtificialPlan');
          }
          else if(index == 2){ //历史验证
            this.TabsIndex = 3;
            this.$router.push('/historyverification');
          }
          else if(index == 3){ //缩水工具
            this.TabsIndex = 4;
            if(this.CaiPiaoType == 'ssc'){ //时时彩
              this.$router.push('/shrinkagetool');
            }else if(this.CaiPiaoType == 'l3d'){ //福彩3d
              this.$router.push('/shrinkagetoolthreebits');
            }else if(this.CaiPiaoType == 'pk10' || this.CaiPiaoType == 'l11x5'){
              this.$router.push('/shrinkagetoolfivebits');
            }else if(this.CaiPiaoType == 'l28' || this.CaiPiaoType == 'k3'){
              this.$router.push('/shrinkagetool123');
            }
          }
          else if(index == 4){ //倍投计算
            this.TabsIndex = 5;
            this.$router.push('/calculation');
          }
          else if(index == 6){ //开奖历史
            this.TabsIndex = 7;
            this.$router.push('historyAward');
          }
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../../assets/css/plan/planpublic.less);
@import url(../../assets/css/plan/plantab.less);
</style>

